import { DATEFORMAT } from '@/common';
import { Button, DatePicker, Form, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { YmDialog } from 'ym-design';

type positionInfoValue = any[];
interface SelNoStudyDaysProps {
  value?: positionInfoValue;
  onChange?: (newVal: positionInfoValue) => void;
}
const requireRules = (text: string) => {
  return [{ required: true, message: text }];
};
const weekList = ['日', '一', '二', '三', '四', '五', '六'];
const dateFormat = 'YYYY-MM-DD';
const SelNoStudyDays: React.FC<SelNoStudyDaysProps> = (props) => {
  console.log(props, '无需培训日');
  const { value, onChange } = props;
  const [form] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  let [tableKey, setTableKey] = useState<number>(0);
  const [noStudyData, setNoStudyData] = useState<any[]>([]);
  const [editIndex, setEditIndex] = useState<number | ''>(''); // 正在编辑的索引，默认为空
  // const [seltedData, setSeltedData] = useState<any[]>([]);
  const columns = [
    {
      title: '日期',
      dataIndex: 'studyday',
      key: 'studyday',
      width: 300,
      render: (_: any, record: any) => (
        <div>
          {record.noTrainTime}(星期{weekList[dayjs(record.noTrainTime).day()]})
        </div>
      ),
    },
    {
      title: '时间',
      dataIndex: 'studyTime',
      key: 'studyTime',
      width: 400,
      render: (_: any, record: any) => <div>——</div>,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 300,
      render: (_: any, record: any, index: number) => (
        <div>
          <Button
            type="text"
            onClick={() => {
              setEditIndex(index);
              form.setFieldValue('selData', dayjs(record.noTrainTime, dateFormat));
              setIsModalOpen(true);
            }}
          >
            <a>编辑</a>
          </Button>
          <Button
            type="text"
            onClick={() => {
              const list = noStudyData;
              list.splice(index, 1);
              setNoStudyData(list.slice());
              onChange?.(noStudyData);
            }}
          >
            <a>删除</a>
          </Button>
        </div>
      ),
    },
  ];
  useEffect(() => {
    const arr = value?.map((el) => {
      return {
        noTrainTime: el.noTrainTime,
      };
    });
    setNoStudyData(arr || []);
  }, [value]);
  const handleOk = () => {
    form.validateFields().then((values) => {
      const list = noStudyData;
      if (editIndex === '') list.push({ noTrainTime: values.selData.format(DATEFORMAT) });
      else list[editIndex].noTrainTime = values.selData.format(DATEFORMAT);
      // setNoStudyData(['333']);
      setNoStudyData(list.slice());
      setTableKey(++tableKey);
      setIsModalOpen(false);
      onChange?.(noStudyData);
    });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <Button
        onClick={() => {
          setEditIndex('');
          setIsModalOpen(true);
          form.resetFields();
        }}
        style={{ marginBottom: 15 }}
      >
        添加无需培训日期
      </Button>
      {noStudyData.length > 0 && <Table key={tableKey} columns={columns} dataSource={noStudyData} pagination={false} />}
      <YmDialog
        title="添加特殊无需培训日"
        centered
        width={480}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        onClose={handleCancel}
        destroyOnClose={true}
      >
        <Form layout="horizontal" labelAlign="right" form={form}>
          <Form.Item label="选择日期" name="selData" rules={requireRules('请选择日期')} style={{ marginBottom: 0 }}>
            <DatePicker style={{ width: '100%' }} getPopupContainer={(trigger) => trigger} />
          </Form.Item>
        </Form>
      </YmDialog>
    </div>
  );
};
export default SelNoStudyDays;
